// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { Theme } from "../theme.slint";
import { MenuButton } from "menu_button.slint";

export component Menu {
    private property <int> container-visibility;

    callback opend();
    callback closed();

    in-out property <bool> menu-button-visible;
    in property <length> start-y;
    in property <length> end-y;
    in property <bool> stays-open;
    in property <length> menu-width <=> i-menu-container.width;
    in property <length> menu-height <=> i-menu-container.height;
    out property <bool> open;

    if(open) : Rectangle {
        background: Theme.palette.pure-black;
        opacity: 0.5;

        TouchArea {
            clicked => {
                hide();
            }
        }
    }

    i-menu-container := Rectangle {
        x: (parent.width - self.width) / 2;
        y: parent.height - start-y;
        width: root.width / 3;
        height: root.height - 75px;

        i-container := Rectangle {
            visible: container-visibility == 1.0;
            border-radius: 4px;
            background: Theme.palette.ebony-radial-gradient;
            clip: true;

            // avoid click-through
            TouchArea {}

            @children
        }

        if(menu-button-visible || container-visibility == 1.0 || stays-open) : HorizontalLayout {
            y:  -i-menu-button.height / 2;
            alignment: center;

            VerticalLayout {
                alignment: start;

                i-menu-button := MenuButton {
                    clicked => {
                        if(open) {
                            hide();
                        } else {
                            open-menu();
                        }
                    }
                }
            }
        }
    }

    public function hide-button() {
        menu-button-visible = false;
    }

    public function open-menu() {
        open = true;
    }

    public function hide() {
        menu-button-visible = false;
        open = false;
        closed();
    }

    states [
        open when root.open : {
            container-visibility: 1.0;
            i-menu-container.y: end-y;

            in {
                animate i-menu-container.y { duration: Theme.durations.medium; }
            }
            out {
                animate container-visibility, i-menu-container.y { duration: Theme.durations.medium; }
            }
        }
    ]
}